<template>
  <view class="content">
    <view class="wrapper">
      <view class="record" v-for="(item, index) in 3">
        <image
          class="record_image"
          :src="productDetail_product_snap.cover"
        ></image>

        <view class="record_content">
          <view class="record_content_title">{{
            productDetail_product_snap.name
          }}</view>
          <view class="record_content_second">
            <image
              class="record_content_avatar"
              :src="productDetail_product_snap.creator_avatar"
            ></image>

            <view class="record_content_username">{{
              productDetail_product_snap.creator_name
            }}</view>
          </view>

          <!-- <view class="record_content_CollectionCode">
            <image
              class="record_content_CollectionIcon"
              src="../../static/collect_icon.png"
            ></image>

            <text class="record_content_no">{{ wholeid.no }}</text>
          </view> -->

          <view class="record_content_button" @click.stop="toHangingSale"
            >挂买单</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      productDetail_product_snap: null,
    };
  },
  onLoad(options) {
    this.productDetail_product_snap = JSON.parse(
      JSON.parse(uni.getStorageSync("productDetail")).product_snap
    );
  },
  methods: {
    toHangingSale() {
      uni.navigateTo({
        url: "../../pages/my_bill/hanging_sale",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;
  min-height: calc(100vh - 44px);
}
.record {
  //   margin-top: 30rpx;
  display: flex;
  align-items: center;
  //   width: 690rpx;
  height: 242rpx;
  border-radius: 24rpx;

  background-image: url(../../static/transaction_record_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 242rpx;
  &_image {
    width: 242rpx;
    height: 242rpx;
    border-radius: 24rpx;
  }
  &_content {
    position: relative;
    height: 100%;
    flex: 1;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &_title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: $text-color1;
      line-height: 44rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    &_second {
      //   margin-top: 20rpx;
      display: flex;
      align-items: center;
    }
    &_avatar {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
    }
    &_username {
      margin-left: 8rpx;
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: $text-color1;
      line-height: 36rpx;

      max-width: 300rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &_third {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
    }
    &_price {
      height: 42rpx;
      font-size: 36rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: $text-color1;
      line-height: 42rpx;
    }
    &_status {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #39a2ff;
      line-height: 34rpx;
    }
    &_CollectionCode {
      padding: 0 30rpx;
      display: inline-block;

      margin-top: 40rpx;
      position: relative;
      left: 16rpx;
      // width: 330rpx;
      height: 34rpx;
      color: #ffffff;
      background: $gradient1;
      border-radius: 18rpx;

      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      text-align: center;
    }
    &_CollectionIcon {
      position: absolute;
      top: -10rpx;
      left: -26rpx;
      width: 52rpx;
      height: 52rpx;
    }
    &_no {
      display: inline-block;
      max-width: 300rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &_button {
      position: absolute;
      right: 28rpx;
      bottom: 26rpx;
      width: 128rpx;
      height: 54rpx;
      background: linear-gradient(90deg, #1fe6e6 0%, #df7fd6 100%);
      border-radius: 28rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 54rpx;
    }
  }
}
.record:nth-child(n + 2) {
  margin-top: 30rpx;
}
</style>